<template>
    <div class="hot">
       <!--轮播图-->
        <div class="swiper-container" v-if="homecasual.length>0">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(casual,index) in homecasual" :key="index">
                    <img :src="casual.imgurl">
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
        </div>
        <!--导航-->
        <Hotnav/>
        <!--广告位-->
        <div class="hot-ad">
            <a>
                <img src="./../../imgs/hot_ad/home_ad.gif">
            </a>
        </div>
        <!--商品-->
        <HotList/>
    </div>
</template>

<script>
    import Swiper from 'swiper'
    import Hotnav from './Hotnav'
    import HotList from'./HotList'
    import 'swiper/dist/css/swiper.min.css'
    import {
        mapState
    } from 'vuex'
    export default {
        name: "Hot",
        components:{
            Hotnav:Hotnav,
            HotList
        },
        computed:{
            ...mapState(['homecasual'])
        },
        mounted(){
            this.$store.dispatch('reqHomecasual');
            this.$store.dispatch('reqHomeNav');
            this.$store.dispatch('reqShopList');
        },
        watch:{
            homecasual(){
                this.$nextTick(()=>{
                    new Swiper ('.swiper-container', {
                        direction: 'horizontal', // 横向切换选项
                        autoplay: true, // 循环模式选项
                        loop: true,
                        // 如果需要分页器
                        pagination: {
                            el: '.swiper-pagination',
                        },
                    })
                })
            }
        }
    }
</script>

<style scoped lang="stylus">
    .hot
        padding-top 46px
        width 100%
        background-color #f5f5f5

    .swiper-slide img
        width 100%
    .hot-ad
        padding 0 5px
        margin 8px 0
        background-color #fff
        img
            width 100%
</style>